<script setup>
import {ref} from "vue";
import Message from "@/component/message.vue";

let text="<span style='color:red'>哈哈哈哈哈哈</span>"
let time=ref('new date()')
let grate=88
let name=""
let pid='test'
let arr=ref([1,2,3,4])
let students=[{name:'于慧茹',sn:2413040412,sex:'女'} ,{name:'孙怡敏',sn:2413040406,sex:'女'},
  {name:'杨蕾',sn:2413040407,sex:'未知'},{name:'张世佳',sn:2413040410,sex:'男'},
  {name:'张培航',sn:2413040405,sex:'不明'}]
let inputValue=ref('5555')//{value:'5555'}

const btnEvent=()=>{
  console.info(inputValue.value)
}

setInterval(()=>{
  time.value=new Date()
},1000)

const addValue=()=>{
  arr.value.push(inputValue.value)
}

</script>

<template>
  <div>
    <h1>{{ text.length }}</h1>
    <a href="">跳转</a>
    <p>{{ time }}</p>
    <p v-text="text"></p>
    <p v-html="text"></p>
    <p v-if="grate >= 90">优秀</p>
    <p v-else-if="grate >= 80">良好</p>
    <p v-else-if="grate >= 70">中等</p>
    <p v-else-if="grate>=60">及格</p>
    <p v-else>重修</p>
    <p v-if="name">{{name}}</p>
    <p v-show="grate>90">嘿嘿嘿</p>
    <p v-bind:id="pid">这是一个test标签</p>
    <p v-for="(item,index) in arr" :key="index">{{item}}</p>
    <table border="1" cellpadding="1" cellspacing="0">
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>学号</td>
        <td>性别</td>
      </tr>
      <tr v-for="(item,index) in students">
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.sn}}</td>
        <td>{{item.sex}}</td>
      </tr>
    </table>

    <input v-model="inputValue" type="text"><br>
    输入框的值：{{inputValue}}
    <button id="btn" v-on:click="btnEvent">添加</button>
    <br>
    当前时间为：{{time}}
    <br>
    <button @click="addValue">给数组添加值</button>
    <br>
    {{arr}}
    <Message pag-value="demo"/>
    <!--    表示当前路由指向哪，这里就是谁-->
    <!--    div 包含了所有demo的内容-->
  </div>
</template>

<style scoped>

</style>
